<?xml version='1.0' encoding='UTF-8' ?>
<f:view xmlns="http://www.w3.org/1999/xhtml" 
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">
    
    <pm:page title="BICE" >
        <f:facet name="postinit">
            <script type="text/javascript">
                jQuery(document).ready(function(){
                    //Home Page icon
                    //jQuery('head').append('<link rel="apple-touch-icon" href="images/logo.jpg"/>');
                    //Splash screen for iPhone
                    //jQuery('head').append('<link rel="apple-touch-startup-image" href="resources/mail.png"/>');
                    //This will hide the browser address bar
                    jQuery('head').append('<meta name="apple-mobile-web-app-capable" content="yes" />');
                    jQuery('head').append('<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>');
                    //Adds a custom style sheet
                    jQuery('head').append('<link href="resources/style.css" rel="stylesheet" type="text/css"/>');
                });
            </script>
        </f:facet>
        <pm:view id="components">
            <pm:header title="BICE" id="bice-header">
                <f:facet name="right">
                    <p:button value="Canal" icon="mail" href="faces/Canal.xhtml"/>
                </f:facet>
                <f:facet name="left">
                    <p:button value="Mensajes" icon="plus" href="faces/Chat.xhtml"/>
                </f:facet>
            </pm:header>
            <pm:content>
                <h:form>
                    <h:panelGroup rendered="#{not sessionBean.logged}">
                        <h:inputText id="nickName" value="#{indexBean.user.nickname}" />
                        <p:watermark for="nickName" value="Nick name" />
                        <p:separator />
                        <p:commandButton value="Login" icon="refresh" update="@form" action="pm:contactList" actionListener="#{indexBean.login}"/>
                    </h:panelGroup>
                    <h:panelGroup rendered="#{sessionBean.logged}">
                        <h:outputLabel for="txtOut" value="User: "/>
                        <h:outputText id="txtOut" value="#{sessionBean.user.nickname}"/>
                        <p:commandButton value="Desconectar" update="@form" actionListener="#{indexBean.disconnect}"/>
                    </h:panelGroup>
                </h:form>
            </pm:content>
        </pm:view>
        
        <pm:view id="mail">
            <pm:header title="BICE">
                <f:facet name="left">
                    <p:button value="Return" icon="back" href="#components"/>
                </f:facet>
            </pm:header>
            <pm:content>
            </pm:content>
        </pm:view>
    </pm:page>
</f:view>